<template>
	<div id="orderManage">
		<div class="breadcrumb">
			<img src="../../../../static/img/attendance_1.png" class="head_img">
			<span class="title" @click="cancel()">考勤记录</span>/ 详情
		</div>
		<div class="search">

			<el-date-picker v-model="startDate" type="date" placeholder="选择日期" @change="changeBookDate()">
			</el-date-picker>
			至
			<el-date-picker v-model="endDate" type="date" placeholder="选择日期" @change="changeBookDate()">
			</el-date-picker>

			<el-select v-model="attendStatus" placeholder="全部考勤状态">
				<el-option label="出勤" value="1"></el-option>
				<el-option label="无效" value="2"></el-option>
				<el-option label="全部考勤状态" value="0"></el-option>
			</el-select>

			<el-button type="primary" class="sel_btn" @click="search()">筛选</el-button>

		</div>
		<div class="list">
			<div class="list_head">
				<span class="head_name">记录详情</span>
				<el-button class="cancel" type="primary" @click="cancel()">返回</el-button>
			</div>
			<div class="attendInfo">
				<span>学期：{{semesterName}}</span>
				<span>姓名：{{stuInfo.name}}</span>
				<span>学号：{{stuInfo.stuNo}}</span>
				<span>院系：{{stuInfo.department}}</span>
				<span>老师：{{stuInfo.teacherName}}</span>
				<span>课程：{{stuInfo.className}}</span>
				<span v-if="targetTimes">完成/出勤次数：{{finishedTimes}}/{{targetTimes}}</span>
			</div>
			<el-table :data="list">
				<el-table-column prop="attDate" label="考勤日期" min-width="120">
				</el-table-column>
				<el-table-column prop="signTime" label="签到时间" min-width="100">
				</el-table-column>
				<el-table-column prop="signOutTime" label="签退时间" min-width="100">
				</el-table-column>
				<el-table-column prop="validTime" label="时长" min-width="100">
				</el-table-column>
				<el-table-column prop="attendanceStatus" label="考勤状态" min-width="100">
					<template scope="scope">
						<span v-if="scope.row.attendanceStatus == 2" style="color: red">无效</span>
						<span v-if="scope.row.attendanceStatus == 1">出勤</span>
					</template>
				</el-table-column>
				<el-table-column min-width="150" align="right">
					<template scope="scope">
						<el-button size="small" type="text" @click="changeAttendStatus(scope.row)">更改考勤状态</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination v-show="this.totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="currentPage"
				 :total="totalCount" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</div>
		<el-dialog title="更改考勤状态" style="width: 60%;margin: 0 auto;" :visible.sync="dialogFormVisible_update">
			<span>是否将该次考勤记录更改为【{{updateStatus == 2?'出勤':'无效'}}】</span>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="confirmUpdate()">确定</el-button>
				<el-button :plain="true" type="primary" @click="dialogFormVisible_update = false">取 消</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				list: [],
				stuInfo: {},
				totalCount: 0,
				endDate: "",
				startDate: "",
				updateRecord: "",
				updateStatus: "",
				attendStatus: "0",
				finishedTimes: "",
				dialogFormVisible_update: false,
				targetTimes: this.$util.getUrlParam("targetTimes") || "",
				semesterName: this.$util.getUrlParam("semesterName") || "",
				currentPage: parseInt(this.$util.getUrlParam("currentPage")) || 1
			};
		},
		mounted() {
			this.getAttendDetail();
			this.getTotalCount();
			this.getStudentInfo();
			this.getFinishCount();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//考勤记录详情列表
			getAttendDetail() {
				let url = this.$util.domain + "/campusadminapi/v2/attendance/record/detail/list";
				this.list = [];
				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						startTime: this.startDate ? new Date(new Date(this.startDate).format("yyyy/MM/dd 00:00:00")).getTime() : 0,
						endTime: this.endDate ? new Date(new Date(this.endDate).format("yyyy/MM/dd 23:59:59")).getTime() : 0,
						status: this.attendStatus,
						sid: this.$util.getUrlParam("semester") || 0,
						uid: this.$util.getUrlParam("uid"),
						pageNum: parseInt(this.currentPage),
						pageSize: 10
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let configList = null;
						if (response.data.data) {
							configList = response.data.data.recordList;
						}

						if (configList && configList.length > 0) {
							for (let i = 0; i < configList.length; i++) {
								let $index = i + 1,
									$attDate = configList[i].attendanceTime,
									$signTime = configList[i].signinTime,
									$signOutTime = configList[i].signoutTime,
									$validTime = configList[i].validTime,
									$attendanceStatus = configList[i].status,
									$recordId = configList[i].recordId;

								this.list.push({
									index: $index,
									attDate: new Date($attDate).format("yyyy-MM-dd"),
									signTime: $signTime,
									signOutTime: $signOutTime,
									validTime: $validTime + "分钟",
									attendanceStatus: $attendanceStatus,
									recordId: $recordId
								});
							}
						}
					}
				});
			},
			// 获取记录详情总页数
			getTotalCount() {
				let url = this.$util.domain + "/campusadminapi/v2/attendance/record/detail/total";
				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						startTime: this.startDate ? new Date(new Date(this.startDate).format("yyyy/MM/dd 00:00:00")).getTime() : 0,
						endTime: this.endDate ? new Date(new Date(this.endDate).format("yyyy/MM/dd 23:59:59")).getTime() : 0,
						sid: this.$util.getUrlParam("semester") || 0,
						status: this.attendStatus,
						uid: this.$util.getUrlParam("uid")
					})
				}).then(response => {
					if (response.data.error == 10000) {
						// 记录详情总页数
						this.totalCount = response.data.data.totalNum;
					}
				});
			},
			// 获取有效记录的总次数
			getFinishCount() {
				let url = this.$util.domain + "/campusadminapi/v2/attendance/record/detail/total";
				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						startTime: 0,
						endTime: 0,
						status: 1,
						sid: this.$util.getUrlParam("semester") || 0,
						uid: this.$util.getUrlParam("uid")
					})
				}).then(response => {
					if (response.data.error == 10000) {
						this.finishedTimes = response.data.data.totalNum;
					}
				});
			},
			// 获取学生信息
			getStudentInfo() {
				let url = this.$util.domain + "/campusadminapi/v1/tools/studentinfo";
				this.$http({
					url,
					method: "GET",
					params: {
						uid: this.$util.getUrlParam("uid"),
						sid: this.$util.getUrlParam("semester")
					}
				}).then(response => {
					if (response.data.error == 10000) {
						// 学生信息
						if (response.data.data) {
							let pre = response.data.data;
							this.stuInfo = {
								name: pre.name,
								department: pre.department,
								className: pre.className,
								teacherName: pre.teacherName,
								stuNo: pre.campusId
							};
						}
					}
				});
			},
			// 搜索
			search() {
				this.getAttendDetail();
				this.getTotalCount();
			},
			// 更改日期
			changeBookDate() {
				if (!this.startDate || !this.endDate) {
					return;
				}
				let stime = this.startDate.getTime();
				let etime = this.endDate.getTime();
				if (stime > etime) {
					this.$util.errorMsg("日期输入有误，请重新选择日期");
					this.startDate = "";
					this.endDate = "";
					return;
				}
			},
			cancel() {
				let semester = this.$util.getUrlParam("semester"),
					unid = this.$util.getUrlParam("unid"),
					teacher = this.$util.getUrlParam("teacher"),
					classes = this.$util.getUrlParam("classes"),
					keywords = this.$util.getUrlParam("keywords"),
					pageNum = this.$util.getUrlParam("pageNum");
				let params = {
					semester, unid, classes, teacher, pageNum, keywords
				}
				this.$util.refreshTo("/#/attendanceManage", params);
			},

			// 修改考勤状态
			changeAttendStatus(row) {
				this.updateRecord = row.recordId;
				this.updateStatus = row.attendanceStatus;
				this.dialogFormVisible_update = true;
			},
			// 确认修改
			confirmUpdate() {
				this.dialogFormVisible_update = false;
				let url = this.$util.domain + "/campusadminapi/v2/attendance/record/changestatus";
				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						recordId: this.updateRecord,
						targetStatus: 3 - this.updateStatus
					})
				}).then(response => {
					if (response.data.error == 10000) {
						// 修改成功
						this.list.forEach(item => {
							if (item.recordId == this.updateRecord) {
								item.attendanceStatus = 3 - Number(item.attendanceStatus);
							}
						});
						if (3 - this.updateStatus == 1) {
							this.finishedTimes = Number(this.finishedTimes) + 1;
						} else {
							this.finishedTimes = Number(this.finishedTimes) - 1;
						}
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			// 请求分页数据分页
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getAttendDetail();
			}
		}
	};
</script>

<style scoped>
	#orderManage {
		padding-top: 60px;
		height: calc(100% - 100px);
	}

	#orderManage .list {
		height: calc(100% - 120px);
	}

	.attendInfo {
		padding: 10px;
		margin-bottom: 10px;
		font-size: 14px;
	}

	.attendInfo span {
		padding-right: 20px;
		color: #333744;
		font-size: 13px;
	}

	#orderManage .search {
		margin: 20px 30px;
		background: #ffffff;
		border-radius: 2px;
		height: 60px;
		line-height: 60px;
		padding: 0 25px;
	}

	.sel_btn {
		position: absolute;
		right: 55px;
		margin-top: 12px;
	}

	.largeIn {
		width: 300px;
	}

	.smallIn {
		width: 150px;
	}

	.title {
		color: #0398ff;
	}
</style>